<template>
  <div>
    <!-- 排片计划页面 -->
    <b style="color:#409EFF;">{{cinemaRoom.cinema_name}}</b> 
    的 
    <b style="color:#409EFF;">{{cinemaRoom.cinema_room_name}} ({{cinemaRoom.cinema_room_type}})</b> 
    的排片计划列表

    <!-- 分割线 -->
    <el-divider></el-divider>

    <!-- 显示表格 -->
    <el-table :data="plans">
      <el-table-column prop="title" label="电影名称" align="center"></el-table-column>
      <el-table-column prop="showingon_date" label="上映时间" align="center"></el-table-column>
      <el-table-column prop="showingon_time" label="场次" align="center"></el-table-column>
      <el-table-column label="票价" align="center">
        <template slot-scope="scope">
          ￥{{scope.row.price}}
        </template>
      </el-table-column>
      <el-table-column label="是否发布" align="center">
        <template slot-scope="scope">
          <el-switch 
            v-model="scope.row.status" 
            :active-value="1" :inactive-value="0"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <el-button size="small" circle icon="el-icon-delete" type="danger"></el-button>
      </el-table-column>
    </el-table>
 
  </div>
</template>

<script>
import httpApi from '@/http';
export default {
  data() {
    return {
      roomId: this.$route.params.roomId,
      cinemaRoom: {}, // 存储当前选中的放映厅对象
      plans: [],  // 保存排片计划列表
    };
  },

  methods: {

    /** 列出当前放映厅排片计划列表 */
    listPlans(){
      httpApi.ShowingonPlanApi
        .queryByRoomId({room_id:this.roomId}).then(res=>{
        console.log('加载当前放映厅的排片计划列表：', res)
        this.plans = res.data.data
      })
    },

    /** 加载放映厅的基本信息 */
    loadRoomInfo() {
      let params = {id: this.roomId}
      httpApi.CinemaRoomApi.queryById(params).then(res=>{
        console.log('查询放映厅的基本信息', res)
        this.cinemaRoom = res.data.data
      })
    }

  },

  mounted(){
    // 加载放映厅的基本信息
    this.loadRoomInfo()
    // 加载该放映厅下的排片计划列表
    this.listPlans()
  }
};
</script>

<style lang="scss" scoped></style>
